<template>
  <Dialog
    v-model="dialogVisible"
    :width="isMobile ? '95%' : '500px'"
    max-height="100px"
    title="导入"
    :before-close="() => closeDialog()"
    :class="isMobile ? 'mobile-import-dialog' : ''"
  >
    <div
      :class="isMobile ? 'mobile-import-content' : 'flex justify-center flex-items-center h-100px'"
    >
      <el-button
        type="danger"
        link
        size="small"
        @click="handDownloadTemp"
        :class="isMobile ? 'mobile-download-btn' : ''"
      >
        （没有模板？点我下载模板）
      </el-button>
    </div>
    <template #footer>
      <div :class="isMobile ? 'mobile-import-footer' : 'flex flex-items-center justify-end'">
        <el-button :class="isMobile ? '' : 'm-r-4'" @click="closeDialog">
          {{ t('system.parameterConfig.cancel') }}
        </el-button>
        <UploadFile
          url="/admin/inventory/importPrice"
          :upload-file-button-name="t('action.importFile')"
          :file-type="['xls', 'xlsx']"
          :params="{ currency: 214 }"
          :limit="1"
          :full-loading="true"
          :button-width="isMobile ? 100 : 65"
          token-key="X-token"
          @upload-success-res="handleExportSuccess"
          :class="isMobile ? 'mobile-upload-btn' : ''"
        />
      </div>
    </template>
  </Dialog>
  <!--  导入日志-->
  <DialogImportLogs ref="DialogImportLogsRef" />
</template>
<script setup lang="ts">
import DialogImportLogs from '../DialogImportLogs/index.vue'
import UploadFile from '@/components/UploadFile/index.vue'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { getImportTemplateApi } from '@/api/warehouse/merchandiseOffers'
import dayjs from 'dayjs'
import { useAppStore } from '@/store/modules/app'

const emit = defineEmits(['refresh'])
const { t } = useI18n()

// 移动端检测
const appStore = useAppStore()
const isMobile = computed(() => appStore.getMobile)

const dialogVisible = ref<boolean>(false)

const DialogImportLogsRef = ref<InstanceType<typeof DialogImportLogs>>()

const handDownloadTemp = async () => {
  await getImportTemplateApi(
    {
      name: 'importPrice',
      ext: 'xlsx'
    },
    `库存管理模板_${dayjs().format('YYYY.MM.DD')}.xlsx`
  )
}

const handleExportSuccess = (resp: Record<string, any>) => {
  nextTick(() => {
    DialogImportLogsRef!.value!.dialogVisible = true
    DialogImportLogsRef.value?.getBackShow(resp)
  })
  closeDialog()
  emit('refresh')
}

const closeDialog = () => {
  dialogVisible.value = false
}

defineExpose({
  dialogVisible
})
</script>
<style lang="less" scoped>
// 移动端样式
@media (width <= 968px) {
  .mobile-import-dialog {
    :deep(.el-dialog) {
      margin: 15vh auto;
      border-radius: 8px;
    }

    :deep(.el-dialog__header) {
      padding: 16px 20px 12px;
      text-align: center;
    }

    :deep(.el-dialog__body) {
      padding: 20px;
    }

    :deep(.el-dialog__footer) {
      padding: 12px 20px 20px;
    }
  }

  .mobile-import-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    text-align: center;

    .mobile-download-btn {
      padding: 12px 16px;
      font-size: 14px;
      background-color: #f8f9fa;
      border: 1px dashed #409eff;
      border-radius: 6px;

      &:hover {
        background-color: #ecf5ff;
        border-color: #66b1ff;
      }
    }
  }

  .mobile-import-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .el-button {
      width: 100%;
      height: 42px;
      font-size: 14px;
      border-radius: 6px;
    }

    .mobile-upload-btn {
      :deep(.el-button) {
        width: 100%;
        height: 42px;
        font-size: 14px;
        border-radius: 6px;
      }
    }
  }
}

// 桌面端保持原有样式
@media (width >= 969px) {
  .mobile-import-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }

  .mobile-import-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .el-button:first-child {
      margin-right: 16px;
    }
  }
}
</style>
